
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=yt0e61KnLOODLCuoC0GVqQXc"></script>
<style>
    #l-map {width: 1170px;height: 498px;overflow: hidden;}
</style>
<!-- #welcome -->
<section id="welcome">

    <!-- .span4 -->
    <div class="span5">
        <h1>Welcome to the <span class="color">RedDesign</span> template demo</h1>
    </div><!-- /.span4 -->

    <!-- .span6 -->
    <div class="span6">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut in lacus rhoncus elit egestas uctus. Nullam at lectus augue. Ut tristique consectetur elit, sed tincidunt elit iaculis in. In hac habitasse platea. Lorem ipsum dolor sit amet, consecteturadipiscing elit.</p>
    </div><!-- /.span6 -->

</section><!-- /#welcome -->



<div class="map-container">
    <div id="l-map"></div>
</div>


<div class="divider"></div>

<div class="row">

    <section class="span3">
        <h1>get in touch</h1>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut in lacus rhoncus elit egestas uctus. Nullam at lectus augue. Ut tristique consectetur elit, sed tincidunt elit iaculis in.</p>

        <h3>Address</h3>
        <address>
            <strong>Company, Inc.</strong><br>
            New York, United States<br><br>
            <abbr>Phone:</abbr> (123) 456-7890<br>
            Fax: (123) 456-7890<br>
            Email: <a href="mailto:#">yourmail@gmail.com</a><br>
            URL: http://www.urloursite.com
        </address>

    </section>

    <script type="text/javascript">

        // 百度地图API功能
        var map = new BMap.Map("l-map");          // 创建地图实例
        var point = new BMap.Point(120.143269,30.290102);  // 创建点坐标
        map.centerAndZoom(point, 6);                 // 初始化地图，设置中心点坐标和地图级别
        map.enableScrollWheelZoom();
        map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
        var customLayer;
        function addCustomLayer(keyword) {
            if (customLayer) {
                map.removeTileLayer(customLayer);
            }
            customLayer=new BMap.CustomLayer({
                geotableId: 49412,
                q: '', //检索关键字
                tags: 'go', //空格分隔的多字符串
                filter: '' //过滤条件,参考http://developer.baidu.com/map/lbs-geosearch.htm#.search.nearby
            });
            map.addTileLayer(customLayer);
            customLayer.addEventListener('hotspotclick',callback);
        }
        addCustomLayer();


    </script>

    <div class="span9">

        <div id="contact-progress" class="alert alert-success" style="display:none;">Loading...</div>

        <!-- #contact-form .row -->
        <form id="contact-form" class="row" method="post" action="mail.php">
            <p class="span3">
                <label for="author"><strong>Name</strong> (required)</label>
                <input type="text" id="author" name="author" class="required" />
            </p>
            <p class="span3">
                <label for="email"><strong>Email</strong> (required)</label>
                <input type="text" id="email" name="email" class="required email" />
            </p>
            <p class="span3">
                <label for="url"><strong>Website</strong></label>
                <input type="text" name="subject" id="url" class="url" />
            </p>
            <p class="span9">
                <label for="text"><strong>Message</strong> (required)</label>
                <textarea id="text" name="text" rows="10" cols="10" class="required"></textarea>
            </p>
            <p class="span12"><input type="submit" value="Send Message" class="btn btn-danger btn-large"></p>
        </form><!-- /#comments-form .row -->

        <script type="text/javascript">
            $(document).ready(function(){
                //CONTACT FORM
                var options = {
                    target: '#contact-progress',
                    success:  showResponse
                }
                $("#contact-form").validate({
                    submitHandler: function(form) {
                        $(form).ajaxSubmit(options);
                    }
                });
                function showResponse() {
                    $('#contact-progress').fadeIn(500).delay(3000).fadeOut(500);
                }
            });
        </script>

    </div>

</div><!-- /.row -->